<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Calendar 日历"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-calendar />
    </demo-block>
    <demo-block title="自定义周次标签">
      <hips-calendar :week-label="weekLabel" />
    </demo-block>
    <demo-block title="包含上下月">
      <hips-calendar full-line />
    </demo-block>
    <demo-block title="自定义每周起始">
      <hips-calendar week-start="1" />
    </demo-block>
    <demo-block title="添加附加数据">
      <hips-calendar
        v-if="showCalendar"
        :append-data="appendData"
      />
    </demo-block>
    <demo-block title="单选日期">
      <hips-calendar
        select-type="single"
        @select-single="handleSelectSingle"
      />
      <div class="selected-label">
        选中了{{ singleSelected }}
      </div>
    </demo-block>
    <demo-block title="不连续多选日期">
      <hips-calendar
        select-type="multi"
        @select-multi="handleMultiSingle"
      />
      <div class="selected-label">
        选中了{{ multiSelected }}
      </div>
    </demo-block>
    <demo-block title="选择起止日期">
      <hips-calendar
        :today-config="todayConfig"
        select-type="start-end"
        @select-start-end="handleSelectStartEnd"
      />
      <div class="selected-label">
        选中了{{ startEndSelected }}
      </div>
    </demo-block>
  </hips-view>
</template>

<script>
import { formatDateTime } from '@/utils';

import BasicView from '@/mixin/basic-view';
import { Calendar } from '@hips/vue-ui';

export default {
  components: {
    [Calendar.name]: Calendar,
  },
  mixins: [ BasicView ],
  data() {
    return {
      appendData: [],
      showCalendar: false,
      weekLabel: [
'Mon', 'Tues', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
],
      singleSelected: '',
      multiSelected: [],
      startEndSelected: [],
      todayConfig: {
        color: 'red',
        dateLabel: 'today',
      },
    };
  },
  beforeRouteEnter(from, to, next) {
    next((vm) => {
      vm.init();
    });
  },
  methods: {
    init() {
      let firstDay = new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        1,
      ); // 本月第一天
      let total = new Date(
        firstDay.getFullYear(),
        firstDay.getMonth() + 1,
        0,
      ).getDate(); // 本月总天数
      for (let i = 0; i < total; i++) {
        let date = new Date(firstDay);
        date.setDate(firstDay.getDate() + i);
        let format = formatDateTime(date, 'yyyy-MM-dd');
        this.appendData.push({
          date: format,
          label: `${format}-label`,
          desc: `项目项目项目${i}`,
          labelColor: '#f96f68',
          borderColor: 'red',
          bgColor: '#f5a623',
          color: 'white',
        });
      }
      this.$nextTick(() => {
        this.showCalendar = true;
      });
    },

    handleSelectSingle(e) {
      console.log(`e = ${JSON.stringify(e)}`);
      this.singleSelected = e;
    },
    handleMultiSingle(e) {
      console.log(`e = ${JSON.stringify(e)}`);
      this.multiSelected = e;
    },
    handleSelectStartEnd(e) {
      console.log(`e = ${JSON.stringify(e)}`);
      this.startEndSelected = e;
    },
  },
};
</script>

<style lang="stylus">
.selected-label {
  padding: 10px;
}
</style>
